<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>作用域与作用域链</title>
  </head>
  <body>
    <script>
      /**
       * 1.作用域
       *   作用：隔离变量，不同作用域下同名变量不会冲突
       * 2.作用域链
       *   多个上下级关系的作用域形成的链，它的方向是从下向上的(从内向外)
       *   查找变量时就是沿着作用域链来查找的
       * 3.查找一个变量的查找规则
       *   在当前作用域下的执行上下文中查找对应的属性，如果有直接返回，否则进入2
       *   在上一级作用域的执行上下文中查找对应的属性，如果有直接返回，否则进入3
       *   再执行2的相同操作，直到全局作用域，如果还找不到就抛出找不到的异常
       * */
      var a = 10,
        b = 20; //   全局作用域

      function fn(x) {
        // fn作用域
        var a = 100,
          c = 300;

        function bar(x) {
          //bar作用域
          var a = 1000,
            d = 4000;
        }
        bar(100);
        bar(200);
      }
      fn(10);

      /**
       * 面试题1
       * */
      var x = 10;
      function f() {
        console.log(x);
      }
      function show(f) {
        var x = 20;
        f(); // 10
      }
      show(f);

      /**
       * 面试题2
       * */
      var fun = function () {
        console.log(fun);
      };
      fun();

      var obj = {
        fun2: function () {
          console.log(fun2); //报错，此时找不到fun2,
          console.log(this.fun2); //可以找到fun2
        },
      };
      obj.fun2();
    </script>
  </body>
</html>
